<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>房屋出租</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style type="text/css">
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
        img{
            width: 100%;
        }
        .radio_inline{
            display: inline-block !important;
            width: 65% !important;
        }
        .radio_inline label{
            width: 45% !important;
            padding-left: 40px !important;
            padding-right: 0px !important;
        }
        .radio_inline input[type=radio]{
            width: 15% !important;
            right: auto !important;
        }

    </style>
    <!--<script src="__TMPL__/public/assets/wuye/js/mui.min.js"></script>-->
    <!--标准mui.css-->
    <link rel="stylesheet" href="__TMPL__/public/assets/wuye/css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="__TMPL__/public/assets/wuye/css/app.css"/>
    <script src="__TMPL__/public/assets/wuye/js/iconfont.js"></script>
    <link href="__TMPL__/public/assets/wuye/css/mui.picker.css" rel="stylesheet" />
    <link href="__TMPL__/public/assets/wuye/css/mui.poppicker.css" rel="stylesheet" />
    <link rel="stylesheet" href="__TMPL__/public/assets/css/baoxiu.css">
    <style type="text/css">
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }

        .z_file {
            width: 1rem;
            height: 1rem;
            background: url(__TMPL__/public/assets/images/z_add.png) no-repeat;
            background-size: 100% 100%;
            float: left;
            margin-right: 0.2rem;
        }
    </style>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-icon mui-icon-left-nav mui-pull-left mui-action-back" href="javascript:window.history.go(-1);"></a>
    <!--<a class="mui-icon mui-icon mui-icon-checkmarkempty  mui-pull-right" style="color: orange;font-size: 3em;padding-top: 0px;margin-top: -4px;" id="save"></a>-->
    <a class="mui-pull-right" id="save" style="color: orange;font-size: 20px;padding-top: 0px;margin-top: 8px;">保存</a>
</header>
{:widget('Wuye/nav')}
<div class="mui-content">
    <div class="mui-card">
        <div class="mui-card-content">
            <div class="mui-card-header">基本信息(信息不会公开，请放心填写)</div>
            <div class="mui-card-content-inner">
                <div class="mui-collapse-content">
                    <form class="mui-input-group">
                        <div class="mui-input-row">
                            <label>小区</label>
                            <input type="text" class="mui-input-clear" placeholder="请填写小区名称或地址" id="xiaoqu">
                            <span class="mui-icon mui-icon-clear mui-hidden"></span>
                        </div>
                        <div class="mui-input-row">
                            <label>区域</label>
                            <li class="mui-table-view-cell" style="list-style: none" id="quyuLi">
                                <a class="mui-navigate-right" id="quyuLiA">
                                    请选择小区所在区域
                                </a>
                            </li>
                            <input type="hidden" id="province">
                            <input type="hidden" id="city">
                            <input type="hidden" id="area">
                        </div>
                        <div class="mui-input-row">
                            <label>厅室</label>
                            <li class="mui-table-view-cell" style="list-style: none" id="tingshiLi">
                                <a class="mui-navigate-right" id="tingshiLiA">
                                    请选择
                                </a>
                            </li>
                            <input type="hidden" id="tingshi">
                        </div>
                        <div class="mui-input-row">
                            <label>朝向</label>
                            <li class="mui-table-view-cell" style="list-style: none" id="chaoxiangLi">
                                <a class="mui-navigate-right" id="chaoxiangLiA">
                                    请选择
                                </a>
                            </li>
                            <input type="hidden" id="chaoxiang">
                        </div>
                        <div class="mui-input-row">
                            <label>楼层</label>
                            <li class="mui-table-view-cell" style="list-style: none" id="loucengLi">
                                <a class="mui-navigate-right" id="loucengLiA">
                                    请选择
                                </a>
                            </li>
                            <input type="hidden" id="louceng">
                        </div>
                        <div class="mui-input-row">
                            <label>类型</label>
                            <li class="mui-table-view-cell" style="list-style: none" id="leixingLi">
                                <a class="mui-navigate-right" id="leixingLiA">
                                    请选择
                                </a>
                            </li>
                            <input type="hidden" id="leixing">
                        </div>
                        <!--<div class="mui-input-row">-->
                            <!--<label>产权年限</label>-->
                            <!--<li class="mui-table-view-cell" style="list-style: none" id="chanquannianxianLi">-->
                                <!--<a class="mui-navigate-right" id="chanquannianxianLiA">-->
                                    <!--请选择-->
                                <!--</a>-->
                            <!--</li>-->
                            <!--<input type="hidden" id="chanquannianxian">-->
                        <!--</div>-->
                        <!--<div class="mui-input-row">-->
                            <!--<label>产权类型</label>-->
                            <!--<li class="mui-table-view-cell" style="list-style: none" id="chanquanleixingLi">-->
                                <!--<a class="mui-navigate-right" id="chanquanleixingLiA">-->
                                    <!--请选择-->
                                <!--</a>-->
                            <!--</li>-->
                            <!--<input type="hidden" id="chanquanleixing">-->
                        <!--</div>-->
                        <div class="mui-input-row">
                            <label>装修</label>
                            <li class="mui-table-view-cell" style="list-style: none" id="zhuangxiuLi">
                                <a class="mui-navigate-right" id="zhuangxiuLiA">
                                    请选择
                                </a>
                            </li>
                            <input type="hidden" id="zhuangxiu">
                        </div>
                        <div class="mui-input-row">
                            <label>房屋面积</label>
                            <input type="text" class="mui-input-clear" placeholder="请填写房屋面积" id="fangwumianji">
                            <span class="mui-icon mui-icon-clear mui-hidden"></span>
                        </div>

                        <div class="mui-input-row">
                            <label>租价</label>
                            <input type="text" class="mui-input-clear" placeholder="请填写租价" id="jiage">
                            <span class="mui-icon mui-icon-clear mui-hidden"></span>
                        </div>

                        <div class="mui-input-row">
                            <label>标题</label>
                            <input type="text" class="mui-input-clear" placeholder="请填写标题" id="biaoti">
                            <span class="mui-icon mui-icon-clear mui-hidden"></span>
                        </div>
                    </form>
                    <div class="mui-input-row">
                        <textarea rows="5" placeholder="请填写房屋详情" id="fangwuxiangqing" style="border: 1px solid #D3D3D3;padding: 2px;"></textarea>
                    </div>
                    <form action="{:url('portal/wuye/rentalImg')}" method="post" enctype="multipart/form-data" class="mui-input-group" id="img">
                        <div class="container mui-input-row" style="height: auto;">
                            <label style="padding:0px;width: 100%;font-size: 12px;"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-tishi"></use></svg>上传图片,注：安卓只能一次上传一张，iPhone可以同时多张上传</label>
                            <!--    照片添加    -->
                            <div class="z_photo">
                                <div class="z_file">
                                    <input type="file" name="image[]" id="file" value="" accept="image/*" multiple onchange="imgChange('z_photo','z_file');" />
                                </div>
                            </div>
                            <!--遮罩层-->
                            <!--<div class="z_mask">-->
                                <!--&lt;!&ndash;弹出框&ndash;&gt;-->
                                <!--<div class="z_alert">-->
                                    <!--<p>确定要删除这张图片吗？</p>-->
                                    <!--<p>-->
                                        <!--<span class="z_cancel">取消</span>-->
                                        <!--<span class="z_sure">确定</span>-->
                                    <!--</p>-->
                                <!--</div>-->
                            <!--</div>-->
                        </div>
                    </form>
                    <input type="hidden" id="imgInput" value="">
                </div>
            </div>


        </div>
    </div>
</div>
</body>
<script src="__TMPL__/public/assets/wuye/js/mui.min.js"></script>
<script src="__TMPL__/public/assets/wuye/js/iconfont.js"></script>
<script src="__TMPL__/public/assets/wuye/js/mui.picker.js"></script>
<script src="__TMPL__/public/assets/wuye/js/mui.poppicker.js"></script>
<script src="__TMPL__/public/assets/wuye/js/city.data-3.js"></script>
<script>
    mui.init({
        swipeBack:true //启用右滑关闭功能
    });
    (function($, doc) {
        $.init();
        $.ready(function() {
            var _getParam = function(obj, param) {
                return obj[param] || '';
            };
            //厅室
            var tingshiPicker = new $.PopPicker();
            tingshiPicker.setData({$tingshili|default=''});
            var tingshiLi = doc.getElementById('tingshiLi');
            var tingshiLiA = doc.getElementById('tingshiLiA');
            var tingshi = doc.getElementById('tingshi');
            tingshiLi.addEventListener('tap', function(event) {
                tingshiPicker.show(function(items) {
                    tingshi.value = items[0]['value'];
                    tingshiLiA.innerText = items[0]['text'];
                });
            }, false);
            //朝向
            var chaoxiangPicker = new $.PopPicker();
            chaoxiangPicker.setData({$chaoxiang|default=''});
            var chaoxiangLi = doc.getElementById('chaoxiangLi');
            var chaoxiangLiA = doc.getElementById('chaoxiangLiA');
            var chaoxiang = doc.getElementById('chaoxiang');
            chaoxiangLi.addEventListener('tap', function(event) {
                chaoxiangPicker.show(function(items) {
                    chaoxiang.value = items[0]['value'];
                    chaoxiangLiA.innerText = items[0]['text'];
                });
            }, false);
            //楼层
            var loucengPicker = new $.PopPicker();
            loucengPicker.setData({$louceng|default=''});
            var loucengLi = doc.getElementById('loucengLi');
            var loucengLiA = doc.getElementById('loucengLiA');
            var louceng = doc.getElementById('louceng');
            loucengLi.addEventListener('tap', function(event) {
                loucengPicker.show(function(items) {
                    louceng.value = items[0]['value'];
                    loucengLiA.innerText = items[0]['text'];
                });
            }, false);
            //类型
            var leixingPicker = new $.PopPicker();
            leixingPicker.setData({$leixing|default=''});
            var leixingLi = doc.getElementById('leixingLi');
            var leixingLiA = doc.getElementById('leixingLiA');
            var leixing = doc.getElementById('leixing');
            leixingLi.addEventListener('tap', function(event) {
                leixingPicker.show(function(items) {
                    leixing.value = items[0]['value'];
                    leixingLiA.innerText = items[0]['text'];
                });
            }, false);
            //产权年限
            var zhuangxiuPicker = new $.PopPicker();
            zhuangxiuPicker.setData({$zhuangxiu|default=''});
            var zhuangxiuLi = doc.getElementById('zhuangxiuLi');
            var zhuangxiuLiA = doc.getElementById('zhuangxiuLiA');
            var zhuangxiu = doc.getElementById('zhuangxiu');
            zhuangxiuLi.addEventListener('tap', function(event) {
                zhuangxiuPicker.show(function(items) {
                    zhuangxiu.value = items[0]['value'];
                    zhuangxiuLiA.innerText = items[0]['text'];
                });
            }, false);

            var quyuPicker3 = new $.PopPicker({
                layer: 3
            });
            quyuPicker3.setData(cityData3);
            var quyuLi = doc.getElementById('quyuLi');
            var quyuLiA = doc.getElementById('quyuLiA');
            var province = doc.getElementById('province');
            var city = doc.getElementById('city');
            var area = doc.getElementById('area');
            quyuLi.addEventListener('tap', function(event) {
                quyuPicker3.show(function(items) {
                    province.value =_getParam(items[0], 'value');
                    city.value =_getParam(items[1], 'value');
                    area.value =_getParam(items[2], 'value');
                    quyuLiA.innerText =  _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text');
                    //返回 false 可以阻止选择框的关闭
                    //return false;
                });
            }, false);
        });
    })(mui, document);
    mui("#save")[0].addEventListener("tap",function(){
        var xiaoqu = document.getElementById("xiaoqu").value;
        var province = document.getElementById("province").value;
        var city = document.getElementById("city").value;
        var area = document.getElementById("area").value;
        var tingshi = document.getElementById("tingshi").value;
        var chaoxiang = document.getElementById("chaoxiang").value;
        var louceng = document.getElementById("louceng").value;
        var leixing = document.getElementById("leixing").value;
        var zhuangxiu = document.getElementById("zhuangxiu").value;
        var fangwumianji = document.getElementById("fangwumianji").value;
        var jiage = document.getElementById("jiage").value;
        var biaoti = document.getElementById("biaoti").value;
        var fangwuxiangqing = document.getElementById("fangwuxiangqing").value;
        var imgInput = document.getElementById("imgInput").value;
        if(xiaoqu == ''||xiaoqu==null){mui.toast('小区不能为空');return false;}
        if(tingshi == ''||tingshi==null){mui.toast('厅室不能为空');return false;}
        if(chaoxiang == ''||chaoxiang==null){mui.toast('房屋朝向不能为空');return false;}
        if(louceng == ''||louceng==null){mui.toast('房屋楼层不能为空');return false;}
        if(leixing == ''||leixing==null){mui.toast('房屋类型不能为空');return false;}
        if(fangwumianji == ''||fangwumianji==null){mui.toast('房屋面积不能为空');return false;}
        if(jiage == ''||jiage==null){mui.toast('租价不能为空');return false;}
        if(biaoti == ''||biaoti==null){mui.toast('标题不能为空');return false;}
        if(fangwuxiangqing == ''||fangwuxiangqing==null){mui.toast('房屋详情不能为空');return false;}
        mui.ajax("{:url('portal/wuye/rentalSave')}",{
            data:{
                xiaoqu:xiaoqu,
                area:area,
                province:province,
                city:city,
                tingshi:tingshi,
                chaoxiang:chaoxiang,
                louceng:louceng,
                leixing:leixing,
                zhuangxiu:zhuangxiu,
                fangwumianji:fangwumianji,
                jiage:jiage,
                biaoti:biaoti,
                fangwuxiangqing:fangwuxiangqing,
                img:imgInput,
                type:'chuzu',
            },
            dataType:'json',//服务器返回json格式数据
            type:'post',//HTTP请求类型
            timeout:10000,//超时时间设置为10秒；
            headers:{'Content-Type':'application/json'},
            success:function(data){
                if(data.code == 1){
                    mui.toast("保存成功,返回上一页");
                    window.history.go(-1);
                }else{
                    mui.toast(dat.msg);
                }
            },
            error:function(xhr,type,errorThrown){
                //异常处理；
                console.log(type);
            }
        });
    });
</script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="__TMPL__/public/assets/wuye/js/jq-from.js"></script>
<script type="text/javascript">
    //px转换为rem
    (function(doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if (clientWidth >= 640) {
                    docEl.style.fontSize = '100px';
                } else {
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

    function imgChange(obj1, obj2) {
        //获取点击的文本框
        var file = document.getElementById("file");
        //存放图片的父级元素
        var imgContainer = document.getElementsByClassName(obj1)[0];
        //获取的图片文件
        var fileList = file.files;

        //文本框的父级元素
        var input = document.getElementsByClassName(obj2)[0];
        var imgArr = [];
        //遍历获取到得图片文件
        for (var i = 0; i < fileList.length; i++) {
            var imgUrl = window.URL.createObjectURL(file.files[i]);
            console.log(imgUrl);
            imgArr.push(imgUrl);
            var img = document.createElement("img");
            img.setAttribute("src", imgArr[i]);

            // document.getElementById("img").submit();

            var imgAdd = document.createElement("div");
            imgAdd.setAttribute("class", "z_addImg");
            imgAdd.appendChild(img);
            imgContainer.appendChild(imgAdd);

            // document.getElementById("img").submit();
            saveReport();
        };
        imgRemove();
    };

    function imgRemove() {
        var imgList = document.getElementsByClassName("z_addImg");
        var mask = document.getElementsByClassName("z_mask")[0];
        var cancel = document.getElementsByClassName("z_cancel")[0];
        var sure = document.getElementsByClassName("z_sure")[0];
        for (var j = 0; j < imgList.length; j++) {
            imgList[j].index = j;
            imgList[j].onclick = function() {
                var t = this;
                mask.style.display = "block";
                cancel.onclick = function() {
                    mask.style.display = "none";
                };
                sure.onclick = function() {
                    mask.style.display = "none";
                    t.style.display = "none";
                };

            }
        };
    };

    function saveReport() {
        $('#img').ajaxSubmit(function (res) {
            var imgInput = document.getElementById("imgInput").value;
            imgInput = imgInput + ',' + res;
            document.getElementById("imgInput").value = imgInput;
            console.log(res);
            console.log(imgInput);
        });
        return false;
    }

</script>
</html>